<template>
    <div>
        <el-table class="table" :data="list" style="width: 100%" :row-style="{ height: '80px' }" >
            <el-table-column prop="name" :label="t('收货人')"></el-table-column>
            <el-table-column :label="t('所在地区')">
                <template slot-scope="scope">
                    <p>{{ scope.row.country + scope.row.province + scope.row.city + scope.row.district }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="address" :label="t('详细地址')"></el-table-column>
            <el-table-column prop="mobile" :label="t('手机号')"></el-table-column>
            <el-table-column :label="t('操作')" header-align="center" :align="'center'">
                <template slot-scope="scope">
                    <el-button class="action-btn" @click="itemClick(scope.row)">{{ $t("公共.选择") }}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getAddressList } from "@/utils/api.js";
export default {
    data() {
        return {
            list: []
        }
    },
    mounted() {
        getAddressList().then(res => {
            if (res.code == 1) {
                this.list = res.data.data;
            }
        });
    },
    methods: {
        /**
         * 简化翻译方法(少写property)
         * @param {String} v 最后一个key值
         * @param {Object} opt 其他参数
         */
        t(v, opt) {
            if (opt) {
                return this.$t(`地址页.${v}`, opt);
            }
            return this.$t(`地址页.${v}`);
        },
        itemClick(item) {
            this.$emit("select", item);
        }
    },
}
</script>
<style lang="less" scoped>
.table {
    .action-btn {
        background: #FF5757;
        color: #fff;
        border-radius: 10px;
    }
}
</style>